<template>
  <div class="userinfo" v-if="userinfo">
    <div class="background">
      <!-- <img :src="userinfo.app_background || userinfo.avatar" alt="" /> -->
      <van-image
        width="100%"
        height="375rem"
        lazy-load
        :src="userinfo.app_background || userinfo.avatar"
      />
      <div class="gary"></div>
    </div>
    <div
      class="nav"
      :class="[
        { active: scrolltop > 210 },
        { flex: scrolltop < 210 && scrolltop > 10 },
      ]"
    ></div>
    <div class="header">
      <van-icon
        name="arrow-left"
        size="22rem"
        @click="onClickLeft"
        :color="scrolltop < 210 ? '#fff' : '#000'"
      />
      <h3
        :class="[
          { active: scrolltop > 210 },
          { flex: scrolltop < 210 && scrolltop > 10 },
        ]"
        :style="{ color: scrolltop > 210 ? '#000' : '#fff' }"
      >
        {{ userinfo.username }}
      </h3>
      <p :style="{ color: scrolltop > 210 ? '#000' : '#fff' }">···</p>
    </div>
    <div class="user">
      <div class="avatar">
        <img :src="userinfo.avatar" alt="" />
      </div>
      <div class="name">
        <p>{{ userinfo.username }}</p>
      </div>
      <div class="about">
        <div>
          <span>{{ userinfo.verify_description }}</span>
          <span>{{ userinfo.ip_location }}</span>
        </div>
        <div>
          <span>{{ userinfo.occupation }}</span>
        </div>
      </div>
      <div class="info">
        <div class="number">
          <span class="sum">{{ count?.count_popularity }}</span>
          <p>人气</p>
        </div>
        <div class="number">
          <span class="sum">{{ count?.count_follower }}</span>
          <p>粉丝</p>
        </div>
        <div class="number">
          <span class="sum">{{ count?.count_followee }}</span>
          <p>关注</p>
        </div>
        <div class="cooperation">联系合作</div>
        <div
          class="follow"
          @click="removeFollow(userinfo.id)"
          v-if="arr.indexOf(userinfo.id) != -1"
          :style="{ color: '#999' }"
        >
          已关注
        </div>
        <div class="follow" @click="addFollow(userinfo.id)" v-else>关注</div>
      </div>
    </div>
    <div class="content">
      <van-tabs
        v-model:active="active"
        swipeable
        title-active-color="red"
        title-inactive-color="#000"
        color="red"
        sticky
        offset-top="42"
      >
        <van-tab title="作品">
          <div class="work">
            <div
              class="item"
              v-for="list in userwork"
              :key="list.id"
              @click="toDetail(list.resource.id)"
            >
              <div class="vedio">
                <!-- <img :src="list.resource.cover" alt="" /> -->
                   <van-image
                width="170rem"
                height="90rem"
                :src="list.resource.cover"
                radius="10rem"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              </div>
              <div class="text">
                <div class="title">
                  <p>
                    {{ list.resource.title }}
                  </p>
                </div>
                <div class="numbers">
                  <span>播放量</span>
                  <span>{{
                    NumberFilter(list.resource.count.count_view)
                  }}</span>
                  <span>喜欢</span>
                  <span>{{
                    NumberFilter(list.resource.count.count_like)
                  }}</span>
                </div>
                <div class="author">
                  <div class="avatar">
                    <img :src="list.resource.author.userinfo.avatar" alt="" />
                  </div>
                  <div class="name">
                    <p>{{ list.resource.author.userinfo.username }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="收藏夹"
          ><div class="empty">还没有收藏的作品</div></van-tab
        >
        <van-tab title="专辑"><div class="empty">还没有创建专辑</div></van-tab>
        <van-tab title="喜欢">
          <HotItem
            v-for="(hot, index) in userlike"
            :key="index"
            :selection="hot"
            v-if="userlike.length"
          />
          <div class="empty" v-else>还没有留下信息</div>
        </van-tab>
        <van-tab title="资料"><div class="empty">还没有留下信息</div></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getUserInfo, getUserWork, getUserLike } from "../api/index";
import { computed } from "@vue/runtime-core";
import HotItem from "../components/HotItem.vue";

const active = ref(0);
const arr = ref(JSON.parse(localStorage.getItem("arr")) || []);
const onClickLeft = () => history.back();

const userinfo = ref(null);
const route = useRoute();
const router = useRouter();
const count = ref(null);
const info = ref(null);

getUserInfo(route.query.id)
  .then((res) => {
    // console.log(res);
    userinfo.value = res.data.data;
    count.value = res.data.data.count;
    // console.log(userinfo.value);

    info["userinfo"] = res.data.data;
    // console.log(info);
  })
  .catch((err) => {
    return;
  });

const userwork = ref([]);
getUserWork(route.query.id)
  .then((res) => {
    // console.log(res.data.data);
    userwork.value = res.data.data.list || [];
  })
  .catch((err) => {
    return;
  });

const userlike = ref([]);
getUserLike(route.query.id)
  .then((res) => {
    // console.log(res.data.data);
    userlike.value = res.data.data.list;
    // console.log(userlike.value);
  })
  .catch((err) => {
    return;
  });

function toDetail(id) {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
}

const list = ref(JSON.parse(localStorage.getItem("followList")) || []);
const infoList = ref([]);
function FilterFun() {
  infoList.value = list.value.filter((o) => o.userinfo.id == route.query.id);
}
FilterFun();

// console.log(infoList.value);
function addFollow(id) {
  let a = JSON.parse(localStorage.getItem("arr")) || [];

  arr.value = [id, ...a];

  localStorage.setItem("arr", JSON.stringify(arr.value));

  list.value = [...list.value, info];
  // console.log(followList.value);
  localStorage.setItem("followList", JSON.stringify(list.value));
}

function removeFollow() {
  console.log(route.query.id);
  let id = route.query.id;
  let a = JSON.parse(localStorage.getItem("arr")) || [];
  arr.value = a.filter((o) => o != id);
  localStorage.setItem("arr", JSON.stringify(arr.value));
  list.value = list.value.filter((o) => o.userinfo.id != id);
  localStorage.setItem("followList", JSON.stringify(list.value));
}

const scrolltop = ref(0);
function getScroll() {
  scrolltop.value = Math.ceil(document.documentElement.scrollTop);
  // console.log(scrolltop.value); //获取当前滚动高度
}
getScroll();

onMounted(() => {
  window.addEventListener("scroll", getScroll);
});

const NumberFilter = computed(() => {
  return (value) => {
    // console.log(value);
    if (value < 10000) {
      return value;
    } else {
      let w = value > 10000 ? value / 10000 : value;
      let y = w > 10000 ? (w / 10000).toFixed(1) + "亿" : w.toFixed(1) + "万";
      return y;
    }
  };
});
</script>

<style lang="scss" scoped>
.userinfo {
  position: relative;
  .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 375rem;
    z-index: -999;
    img {
      width: 100%;
      height: 375rem;
    }
    .gary {
      width: 100%;
      height: 375rem;
      background-color: rgba(0, 0, 0, 0.15);
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .nav {
    width: 100%;
    height: 45rem;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: 0;
    z-index: 99;
  }
  .header {
    width: 100%;
    height: 45rem;
    padding: 10rem 20rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: -2rem;
    left: 0;
    // background-color: #fff;
    // opacity: 0.1;
    z-index: 990;
    P {
      font-size: 22rem;
      font-weight: bold;
      // opacity: 1;
      // color: #fff;
    }
    h3 {
      // color: #fff;
      opacity: 0;
      &.active {
        opacity: 1;
      }
      &.flex {
        opacity: 0.5;
      }
    }
  }
  .flex {
    opacity: 0.5;
  }
  .active {
    opacity: 1;
  }
  .user {
    margin: 25rem 0 15rem;
    padding: 0 20rem;

    .avatar {
      img {
        width: 60rem;
        height: 60rem;
        border-radius: 50%;
      }
    }
    .name {
      margin: 25rem 0 15rem 0;
      p {
        font-size: 18rem;
        color: #fff;
      }
    }
    .about {
      margin-top: 25rem;
      div {
        margin: 20rem 0;
        span {
          font-size: 12rem;
          color: #fff;
          margin-right: 5rem;
        }
      }
    }
    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 40rem 0;
      .number {
        height: 36rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .sum {
          font-size: 12rem;
          color: #fff;
          font-weight: bold;
        }
        p {
          font-size: 12rem;
          color: #fff;
        }
      }
      .cooperation {
        font-size: 12rem;
        color: #000;
        padding: 5rem 15rem;
        background-color: #fff;
        border-radius: 15rem;
      }
      .follow {
        padding: 5rem 15rem;
        font-size: 12rem;
        color: #a3a3a3;
        background-color: #f0f0f0;
        border-radius: 15rem;
        width: 66rem;
        text-align: center;
      }
    }
  }
  .content {
    margin-top: 30rem;
    .work {
      padding: 15rem;
      .item {
        display: flex;
        border-bottom: 2rem solid #f5f5f5;
        padding: 15rem 0;
        // align-items: center;
        .vedio {
          margin-right: 10rem;
          img {
            width: 170rem;
            height: 90rem;
            border-radius: 10rem;
          }
        }
        .text {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          .title {
            p {
              font-size: 14rem;
              color: #000;
              font-weight: bold;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              // height: 40rem;
            }
          }
          .numbers {
            span {
              font-size: 12rem;
              color: #999;
              margin-right: 5rem;
            }
          }
          .author {
            display: flex;
            align-items: center;
            .avatar {
              img {
                width: 15rem;
                height: 15rem;
                border-radius: 50%;
                margin-right: 15rem;
              }
            }
            .name {
              p {
                width: 120rem;
                font-size: 14rem;
                color: #666;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }
    .empty {
      height: 300rem;
      line-height: 300rem;
      text-align: center;
      font-size: 14rem;
    }
    .carditem {
      padding: 0rem 20rem;
    }
  }
 
}
</style>  